<template>
  <div class="mock-exam">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>科目{{types==1?'一':'四'}}</el-breadcrumb-item>
      <el-breadcrumb-item>模拟考试</el-breadcrumb-item>
    </el-breadcrumb>
    <img
      class="exit-btn"
      src="@/assets/关闭.png"
      alt=""
      v-if="steps == 2"
    />

    <StepOne
      :buyInfo="buyInfo"
      @getSteps="getSteps"
      v-if="steps == 1"
      :examAddress="examAddress"
    ></StepOne>
    <StepTwo @getSteps="getSteps" :examAddress="examAddress" :types="types" v-if="steps == 2"></StepTwo>
  </div>
</template>

<script>
import StepOne from "@/components/mockExam/stepOne.vue";
import StepTwo from "@/components/mockExam/stepTwo.vue";
export default {
  name: "MockExam",
  components: {
    StepOne,
    StepTwo,
  },
  props:['subject'],
  data() {
    return {
      steps: 1,
      buyInfo: {
        isBuy: false,
        tryNum: 3,
      },
      // 随机考台
			examAddress: Math.floor(Math.random() * (100 - 1) + 1),
      types:1
    };
  },
  mounted(){
    this.types = this.$route.query.type
  },
  methods: {
    // 获取组件种传回来的步骤数
    getSteps(steps) {
      console.log(steps, "步数");
      this.$nextTick(() => {
        this.steps = steps;
      });
    },
  },
};
</script>

<style lang="scss">
.mock-exam {
  padding: 1.5% 12.5%;
  background-color: #fff;
  min-height: 83.2vh;
  position: relative;

  .exit-btn {
    position: absolute;
    top: 4vh;
    cursor: pointer;
    right: 12.5%;
    width: 1.3vw;
    height: 2.5vh;
  }
}
</style>